<template>
  <div class="df fdc jcc totalList">
    <!-- 总合列表 -->
    <!-- 使用 -->
    <div class="df jcsb">
      <card-vue
        :item="item"
        v-for="item in cardData"
        :key="item.title"
      ></card-vue>
    </div>
    <!-- 数据统计 -->
    <!-- 表格统计必须有宽高 -->
    <div class="totalSheet" ref="chartRef"></div>
  </div>
</template>

<script>
// 引入组件
import cardVue from './card.vue'
// 接口
import {getTatalDataReq} from '@/api/report '
//引入echarts
import * as echarts from 'echarts'

export default {
  // 注册
  components: {
    cardVue,
  },
  data() {
    return {
      cardData: [],
    }
  },
  methods: {
    // 获取数据
    async getData() {
      let res = await getTatalDataReq()
      // console.log(res)
      // 解构
      let {
        xData,
        orderData,
        amountData,
        totalOrder,
        totalAmount,
        todayOrder,
        totayAmount,
      } = res.data
      // 处理数据
      let temp = [
        {
          title: '总订单',
          count: totalOrder,
          imgUrl: require('@/assets/imgs/1.png'),
        },
        {
          title: '总销售额',
          count: totalAmount,
          imgUrl: require('@/assets/imgs/2.png'),
        },
        {
          title: '今日订单数',
          count: todayOrder,
          imgUrl: require('@/assets/imgs/3.png'),
        },
        {
          title: '今日销售额',
          count: totayAmount,
          imgUrl: require('@/assets/imgs/4.png'),
        },
      ]
      //数据赋值
      this.cardData = temp
      //处理数据
      let series = [
        {
          type: 'line',
          name: '金额数据',
          data: amountData,
        },
        {
          type: 'line',
          name: '订单数据',
          data: orderData,
        },
      ]

      //画图
      this.renderLine({
        series,
        xData,
      })
    },
    //画折线图
    renderLine(obj) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(this.$refs.chartRef)
      //配置项
      let options = {
        title: {
          text: '数据统计',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: obj.xData,
        },
        yAxis: {
          type: 'value',
        },
        series: obj.series,
      }
      // 绘制图表
      myChart.setOption(options)
    },
  },
  mounted() {
    this.getData()
  },
}
</script>

<style lang="scss" scoped>
.totalSheet {
  height: 500px;
  background: #fff;
  // margin: 20px 20px;
  margin-top: 20px;
}
</style>
